<template>
  <vxe-modal v-model="modalVisible" ref="xModal" title="新增项目" width="1000" height="500" resize remember fullscreen>
    <template v-slot>
      <vxe-form
          ref="xForm"
          class="data-form"
          title-align="right"
          title-width="110"
          :data="formData"
          :rules="formRules"
          :loading="loading">
        <vxe-form-item title="项目名称" field="Name" span="24">
          <template v-slot="scope">
            <vxe-input v-model="formData.Name" placeholder="请填写名称" clearable></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="项目别名" field="Aliasname" span="24">
          <template v-slot="scope">
            <vxe-input v-model="formData.Aliasname" placeholder="取个代号" clearable></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item title="描述" field="Desc" span="24">
          <template v-slot="scope">
            <editor-bar v-model="formData.Desc" v-bind="{ width: '100%', height: '500px' }"></editor-bar>
          </template>
        </vxe-form-item>
        <vxe-form-item title="开始和结束日期" field="Started" span="12">
          <template v-slot>
            <el-date-picker v-model="formData.Started" type="date" placeholder="开始日期"></el-date-picker>
          </template>
        </vxe-form-item>
        <vxe-form-item title="To" field="Ended" span="12" title-width="30">
          <template v-slot>
            <el-date-picker v-model="formData.Ended" type="date" placeholder="结束日期"></el-date-picker>
          </template>
        </vxe-form-item>
        <div align="center">
          <el-button type="primary" v-throttle="[submitEvent, `click`, 3000]">提交</el-button>
        </div>
      </vxe-form>
    </template>
  </vxe-modal>
</template>

<script>
import projectApi from '@/api/projectApi'
import EditorBar from '@/components/element/wangeditor'
export default {
  components: {
    EditorBar
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    modalVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    modalVisible (val) {
      if (!val) {
        this.$refs.xForm.reset()
      }
    }
  },
  data () {
    return {
      loading: false,
      formData: {
        Name: '',
        Aliasname: '',
        Desc: '',
        Started: Date.now(),
        Ended: Date.now()
      },
      formRules: {
        Name: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
        Aliasname: [{ required: true, message: '请填写项目别名', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    // 暂未实现
    // window.addEventListener('resize', () => {
    //   this.$refs.xModal.recalculate();
    //   this.$refs.xModal.zoom()
    // })
  },
  methods: {
    submitEvent () {
      let _this = this
      _this.$refs.xForm.validate().then(() => {
        _this.loading = true
        projectApi.create(this.formData).then(res => {
          _this.$XModal.message({message: res.message, status: res.code ? 'success' : 'error'})
          _this.$emit('create')
        }).finally(() => {
          _this.loading = false
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped src="@/assets/css/page/projectManage/add.scss"></style>
